<template>
  <div class="main">
    <van-sticky>
      <div class="nav">
<!--        <img class="back" :src="back" alt="" @click="handleBack"/>-->
        <i class="el-icon-arrow-left" @click="handleBack"></i>
        <div class="header">
          <el-input
              placeholder="请输入关键词"
              @focus="handleSearch"
              class="search"
          >
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <img class="share" :src="share" alt="" @click="handleShare"/>
      </div>
    </van-sticky>
    <div class="body">
      <div class="body-item">
        <van-swipe :autoplay="3000" loop class="swiper-container">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index">
            <img class="swiper-image" :src="item" alt="Banner Image">
          </van-swipe-item>
        </van-swipe>
        <div class="num">
          <div class="dz"><span class="rmb">￥</span>{{ yhj }}</div>
          <div class="yj"><span>原价：</span>{{ yj }}元</div>
          <div class="pel">{{ gmrs }}人购买</div>
        </div>
        <div class="desc">
          {{ name }}
        </div>
        <div class="params">
          <div v-for="(spec, index) in specs" :key="index" class="params-item">
            <div style="width: 60px;">{{ spec.paramsKey }}</div>
            <div class="params-item-r">
              <div>
                {{ spec.paramsValue }}
              </div>
            </div>
          </div>
          <div class="params-item" @click="buyNow">
            <div style="width: 60px;">选择</div>
            <div class="params-item-r">
              <div>规格</div>
            </div>
            <img :src="backRight" style="width: 10px;height: 13px;margin-left: auto"/>
          </div>
        </div>
      </div>
      <div class="good-item">
        <div class="good-item-top">
          <div class="dr"></div>
          <div class="good-detail">商品详情</div>
          <div class="dr"></div>
        </div>
        <!--                <img :src="goodDetailPics?store.state.imgUrl+goodDetailPics:detailPicture">-->
        <div
            style="display: flex;flex-direction: column;align-items: center;overflow-x: hidden;padding:10px 10px 60px 10px;justify-content: center">
          <div v-for="(item, index) in goodDetailPics" :key="index">
            <img :src="item" alt="Banner Image" style="width: 100%">
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-l">
        <div @click="gotoChat">
          <img class="imgsty" :src="kf"/>
          <div class="scfont">客服</div>
        </div>
        <div @click="collectFun">
          <img class="imgsty" :src="remarkList.urlsc" width="16" v-if="!collect"/>
          <img class="imgsty" :src="remarkList.urllove" width="16" v-if="collect"/>
          <div class="scfont">收藏</div>
        </div>
      </div>
      <div class="footer-r" v-if="putaway==0" @click="buyNow">立即购买</div>
      <div class="footer-r" v-if="putaway == 1" style="background-color: red" @click="buyNow">该商品已下架</div>
    </div>
    <!--    规格的弹框-->
    <van-action-sheet v-model="show">
      <div class="content">
        <div class="content-desc">
          <img :src="store.state.imgUrl+chooseGg.picture"/>
          <div class="content-desc-r">
            <div class="desc">{{ name }}</div>
            <div class="content-desc-price">
              <div class="sj"><span>￥</span>{{ chooseGg.price }}</div>
              <div class="yj">原价：￥{{ chooseGg.oldPrice }}</div>
            </div>
          </div>
        </div>
        <div class="content-sku">
          <div class="title">规格</div>
          <div class="shop-desc" v-for="(item,index) in skus" :key="index">
            <div class="shop-desc-item" :class="{ 'selected': active == index }" @click="select(item,index)">
              {{ Object.values(JSON.parse(item.sku)).join('/') }}
            </div>
          </div>
        </div>
        <div class="content-buy-num">
          <div class="gmnum">购买数量</div>
          <div class="add-reduce">
            <img :src="reduce" @click="reduceFun" v-if="num>1"/>
            <img :src="reduceZh" @click="reduceZhFun" v-if="num<=1"/>
            <div class="num">{{ num }}</div>
            <img :src="add" @click="addFun" v-if="num<10"/>
            <img :src="addZh" @click="addZhFun" v-if="num>=10"/>
          </div>
        </div>
        <div class="content-btn" @click="gotoOrder">
          确认
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import {getGoodsDetail, addCollect} from "../../../api/shopping";
import store from "../../../store";
import {mapState} from "vuex";

export default {
  name: "index",
  data() {
    return {
      store: store,
      active: 0,
      backRight: require('@/assets/shopping/back-right.png'),
      detailPicture: require('@/assets/shopping/shop-detail.png'),
      add: require('@/assets/shopping/add.png'),
      reduce: require('@/assets/shopping/reduce.png'),
      reduceZh: require('@/assets/shopping/reduceZh.png'),
      addZh: require('@/assets/shopping/addZh.png'),
      show: false,
      collect: false,
      kf: require('@/assets/my/lxkf.png'),
      back: require("@/assets/search/back.png"),
      share: require("@/assets/my/share.png"),
      bannerList: [require('@/assets/shopping/zwt.png'),],
      remarkList: {
        urlsc: require('@/assets/remark/sc.png'),
        urllove: require('@/assets/remark/sc_love.png'),
      },
      skuList: [],//动态参数规格及对应的价格和库存
      skus: [],
      specs: [],
      yj: 0,
      yhj: 0,
      name: '',
      gmrs: 0,
      goodDetailPics: [],//商品详情图 后端不确定是一个或多个
      id: '',//商品的id
      putaway: '',
      shopId: ''
    }
  },
  mounted() {
    // let id = this.$route.query.id
    this.getGoodsDetail()
  },
  computed: {
    ...mapState('shopping', ['chooseGg', 'num', 'detailId', 'goods', 'skuId']),
  },
  methods: {
    gotoChat() {
      this.$router.push(
          {
            path: '/chatOffic',
            query: {
              flagName: '商品',
              shopId: this.shopId
            }
          }
      )
    },
    async collectFun() {
      this.collect = !this.collect
      if (this.collect) {
        this.$toast.success('收藏成功')
      } else {
        this.$toast.fail('取消收藏')
      }
      //调用收藏的接口
      await this.getCollect()
    },
    getCollect() {
      let data = {
        id: this.id,
        type: '1',
        skuId: this.skuId
      }
      return new Promise((resolve, reject) => {
        addCollect(data).then((res) => {
          if (res.code == 0) {
            console.log('收藏成功')
          }
        })
      })
    },
    reduceFun() {
      if (this.num > 1) {
        this.$store.commit('shopping/SET_NUM_REDUCE')
      }
    },
    reduceZhFun() {
      this.$toast('不能再减了')
    },
    addFun() {
      if (this.num < 10) {
        this.$store.commit('shopping/SET_NUM_ADD')
      }
    },
    addZhFun() {
      this.$toast('最多购买10个')
    },
    getGoodsDetail() {
      let data = {
        id: this.detailId
      }
      console.log('------goodsDetail-----', data)
      getGoodsDetail(data).then(res => {
        //goodPics 商品图->bannerList字段
        //specs ->params字段
        this.$store.dispatch('shopping/setGoods', res.data)
        if (res.data.id !== null) {
          this.bannerList = res.data.goodPics.split(',').map(path => store.state.imgUrl + path.trim()); //商品swiper图
          console.log('---bannerList---', this.bannerList)
          this.specs = res.data.params //动态参数
          this.yj = res.data.oldPrice
          this.yhj = res.data.price
          this.name = res.data.name
          this.gmrs = res.data.num
          this.shopId = res.data.shopId
          this.putaway = res.data.putaway //是否上下架 0 ：上架 1：下架
          console.log('putaway', this.putaway);
          this.goodDetailPics = res.data.goodDetailPics.split(',').map(path => store.state.imgUrl + path.trim())
          console.log('---goodDetailPics----', this.goodDetailPics)
          this.skus = res.data.skus
          console.log('skus', this.skus)
          this.id = res.data.id
          //判断是否收藏
          this.collect = res.data.collect == 0 ? false : true //0 否 1 是
          console.log('------接口数据是否收藏-----', this.collect)
          this.$store.dispatch('shopping/setChooseGG', this.skus[0])
        }

        // // 解析动态规格和属性
        // const property = {};
        // const propertys = [];
        // data.skus.forEach((sku) => {
        //   const skuObj = JSON.parse(sku.sku);
        //   // 提取动态规格
        //   Object.keys(skuObj).forEach((key) => {
        //     if (!property.hasOwnProperty(key)) {
        //       property[key] = [skuObj[key]];
        //     } else if (!property[key].includes(skuObj[key])) {
        //       property[key].push(skuObj[key]);
        //     }
        //   });
        //   // 提取属性
        //   const propertyItem = {
        //     ...skuObj,
        //     '价格': sku.price.toString(),
        //     '库存': sku.inventory.toString()
        //   };
        //   propertys.push(propertyItem);
        // });
        // // 构造最终数据结构
        // const result = {
        //   property,
        //   propertys
        // };
        // this.skuList = result
        // const transformedData = Object.entries(result).map(([name, children]) => {
        //   return {
        //     name,
        //     children: children.map(child => ({name: child}))
        //   };
        // });
        // this.sku = transformedData
        // // 输出结果
        // console.log(this.skuList);
      })
    },
    select(item, index) {
      this.active = index
      this.$store.dispatch('shopping/setChooseGG', item)
    },
    buyNow() {
      this.show = true
    },
    handleBack() {
      console.log('isShopping', this.$store.state.isShopping)
      if (this.$store.state.isShopping == 1) {
        this.$router.push({path: '/shopping'})
      } else if (this.$store.state.isShopping == 2) {
        this.$router.push({path: '/personalPage', query: {active: 2}})
      } else {
        this.$router.go(-1)
      }
      let message = {
        action: 'showBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
      console.log('store isShopping', this.$store.state.isShopping)
    },
    handleShare() {
      this.$toast('去分享需与App交互')
    },
    handleSearch() {
      this.$router.push({path: "/searchShopping"});
    },
    gotoOrder() {
      this.$router.push({path: '/writeOrder'})
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  overflow: auto;
  //padding: 15px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;

  .nav {
    font-size: 20px;
    color: #ffffff;
    background: rgba(242, 150, 0, 1);
    height: 44px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header {
      margin-right: 5px;
      .search {
        width: 283px;
      }

      /deep/ .el-input .el-input__inner {
        border-radius: 15.5px;
      }
    }

    .back {
      width: 10px;
      height: 16px;
    }

    .share {
      width: 22px;
      height: 22px;
    }
  }

  .body {
    flex: 1;

    .body-item {
      padding: 10px 15px;

      box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.15);

      .swiper-container {
        //width: 356px;
        height: 356px;
        //height: 200px;
        //margin-bottom: 20px;
      }

      .swiper-image {
        width: 100%;
        height: 100%;
        opacity: 1;
        border-radius: 13px;
      }

      .num {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 5px 5px;

        .dz {
          font-size: 28px;
          font-weight: 500;
          line-height: 40.54px;
          color: rgba(255, 0, 0, 1);

          .rmb {
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 0, 0, 1);
          }
        }

        .yj {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20.27px;
          color: rgba(166, 166, 166, 1);
          text-align: center;
          vertical-align: top;
        }

        .pel {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20.27px;
          color: rgba(166, 166, 166, 1);
          text-align: center;
          vertical-align: top;
        }
      }

      .desc {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 26.06px;
        color: rgba(29, 22, 23, 1);
        text-align: left;
        vertical-align: top;
      }

      .params {
        font-size: 15px;
        font-weight: 400;
        line-height: 24px;
        color: rgba(128, 128, 128, 1);
        margin-top: 17px;

        .params-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;

          .params-item-r {
            margin-left: 10px;
            display: flex;

            > div {
              margin-right: 5px;
            }
          }
        }
      }
    }

    .good-item {
      padding: 10px 0px;

      > img {
        width: 100%;
        height: 100%;
      }

      .good-item-top {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;

        .dr {
          width: 84px;
          opacity: 1;
          border: 1px solid rgba(199, 199, 199, 1);
        }

        .good-detail {
          font-size: 17px;
          font-weight: 400;
          line-height: 24.62px;
          color: rgba(128, 128, 128, 1);
          text-align: center;
          vertical-align: top;
          margin: 0px 15px;
        }
      }

    }
  }

  .footer {
    width: 100%;
    height: 60px;
    opacity: 1;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.3px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    vertical-align: top;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    background: rgba(247, 248, 248, 1);

    .footer-l {
      //line-height: 60px;
      width: 50%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .imgsty {
        width: 27px;
        height: 24px;
      }

      .scfont {
        font-size: 12px;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
      }
    }

    .footer-r {
      line-height: 60px;
      background: rgba(242, 150, 0, 1);
      width: 50%;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -0.3px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      vertical-align: top;
    }
  }

  .content {
    .content-desc {
      padding: 21px 18px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 0.5px solid rgba(229, 229, 229, 1);

      > img {
        width: 118px;
        height: 118px;
        border-radius: 5px;
      }

      .content-desc-r {
        margin-left: 17px;

        .desc {
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 23.17px;
          color: rgba(29, 22, 23, 1);
        }

        .content-desc-price {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .sj {
            font-size: 28px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 40.54px;
            color: rgba(255, 0, 0, 1);

            > span {
              font-size: 16px;
              font-weight: 500;
            }
          }

          .yj {
            margin-left: 22px;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 20.27px;
            color: rgba(166, 166, 166, 1);
            text-align: center;
            vertical-align: top;
          }
        }
      }
    }

    .content-sku {
      padding: 21px 18px;
      height: 200px;
      overflow-y: scroll;

      .title {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 23.17px;
        color: rgba(0, 0, 0, 1);
      }

      .shop-desc {
        //font-size: 15px;
        //font-weight: 400;
        //letter-spacing: 0px;
        //line-height: 24px;
        //color: rgba(255, 255, 255, 1);
        .shop-desc-item {
          margin-top: 17px;
          //height: 44px;
          padding: 8px;
          border-radius: 5px;
          width: 238px;
          font-size: 15px;
          font-weight: 400;
          display: flex;
          justify-content: center;
          align-items: center;
          //letter-spacing: 0px;
          //line-height: 44px;
          //text-align: center;
          color: rgba(84, 84, 84, 1);
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(84, 84, 84, 1);
        }

        .selected {
          background: rgba(242, 150, 0, 1);
          color: rgba(255, 255, 255, 1);
          border: 1px solid rgba(255, 255, 255, 1);
        }
      }

    }

    .content-buy-num {
      border-top: 0.5px solid rgba(229, 229, 229, 1);
      padding: 10px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .gmnum {
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(84, 84, 84, 1);
      }

      .add-reduce {
        display: flex;
        justify-content: center;
        align-items: center;

        .num {
          padding: 0px 17px;
        }

        > img {
          width: 15px;
          height: 15px;
        }
      }
    }

    .content-btn {
      height: 60px;
      opacity: 1;
      background: rgba(242, 150, 0, 1);
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -0.3px;
      line-height: 60px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      vertical-align: top;
    }
  }
}
</style>
